<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Marvin JS Example - Get SVG</title>
	<link type="text/css" rel="stylesheet" href="../../css/doc.css" />
	<link type="text/css" rel="stylesheet" href="../../js/lib/rainbow/github.css" />
	<script src="../../js/lib/jquery-1.9.1.min.js"></script>
	<script src="../../js/lib/rainbow/rainbow-custom.min.js"></script>
	<script src="../../gui/lib/promise-1.0.0.min.js"></script>
	<script src="../../js/marvinjslauncher.js"></script>
	<script>
	var marvinSketcherInstance;
	
	$(document).ready(function handleDocumentReady (e) {
		// get the reference to the Marvin JS editor
		MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
			marvinSketcherInstance = sketcherInstance;
			initControl();
		},function (error) {
			alert("Cannot retrieve sketcher instance from iframe:"+error);
		});	
			
	});
	
	function initControl() {
		$("#btn-submit").click(function() {
			marvinSketcherInstance.exportStructure('mrv').then(function(source) {
				$("#input-mrv").val(source);
				var form = $("#molform");
				form.submit();
			}, function(error) {
				alert("Cannot export structure:"+error);
			});
		})
	}
	</script>
</head>
<body>
	<h1>Marvin JS Example - Submit a form</h1>
	<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
	<div class="resizable">
			<iframe src="../../editorws.html" id="sketch" class="sketcher-frame" data-toolbars="reporting"></iframe>
	</div>
	<form id="molform" method="post" action="echo.php">
		<input type="hidden" name="mrv" id="input-mrv"/>
		<input type="button" id="btn-submit" value="Submit"/>
	</form>
	<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
</body>
</html>